<template>
   <div class="ContentAuditVue">
      <div class="title">
         <button :class="{ btnActive: state.type === 0 }" @click="getFrontManagementContentList(0)">待审核</button>
         <button :class="{ btnActive: state.type === 1 }" @click="getFrontManagementContentList(1)">已审核</button>
         <button :class="{ btnActive: state.type === 2 }" @click="getFrontManagementContentList(2)">已驳回</button>
         <button :class="{ btnActive: state.type === 3 }" @click="getFrontManagementContentList(3)">已删除</button>
         <el-switch active-text="开启审核" inactive-text="关闭审核" :loading="loading1" :before-change="checkSwitch"
            v-model="SystemData.SystemConfig.CONFIG_CONTENT_CHECK_SWITCH" />
      </div>
      <div class="Audit-list">
         <el-table :data="state.contentlist" stripe style="width: 100%">
            <el-table-column prop="createdAt" label="发布日期" width="170">
               <template #default="row">
                  <span :style="{ color: Utils.isToday(row.row.createdAt) === true ? 'red' : '#333' }">{{
                     dayjs(row.row.createdAt).format('YYYY-MM-DD HH:mm:ss') }}</span>
               </template>
            </el-table-column>
            <el-table-column prop="postsTitle" label="标题/内容" width="320">
               <template #default="row">
                  <span :style="{ color: Utils.isToday(row.row.createdAt) === true ? 'red' : '#333' }" v-if="row.row.postsTitle">
                     {{ row.row.postsTitle }}
                  </span>
                  <span :style="{ color: Utils.isToday(row.row.createdAt) === true ? 'red' : '#333' }" v-else>
                     {{ row.row.postsContent }}
                  </span>
               </template>
            </el-table-column>
            <el-table-column prop="postsUserId" label="作者" width="170">
               <template #default="row">
                  <div style="display: flex;align-items: center;">
                     <el-image style="width: 25px;height: 25px;border-radius: 50%;margin-right: 10px;"
                        :src="row.row.postsUserId.useravatar" fit="cover" lazy :alt="row.row.postsUserId.username" />
                     <span>{{ row.row.postsUserId.username }}</span>
                  </div>
               </template>
            </el-table-column>
            <el-table-column prop="_id" label="操作" fixed="right" width="305">
               <template #default="row">
                  <!-- 待审核 -->
                  <div style="display: flex;" v-if="state.type === 0">
                     <button style="background: #1b5fa1;" @click="gopostsinfo(row.row)">查看</button>
                     <button style="background: #df890b;" @click="getApproved(row.row)">通过</button>
                     <button style="background: #a1241b;" @click="turnDown(row.row)">驳回</button>
                     <button style="background: #a1241b;margin: 0;" @click="deletePosts(row.row)">删除</button>
                  </div>
                  <!-- 已审核 -->
                  <div style="display: flex;" v-if="state.type === 1">
                     <button style="background: #1b5fa1;" @click="gopostsinfo(row.row)">查看</button>
                     <button style="background: #a1241b;" @click="turnDown(row.row)">驳回</button>
                     <button style="background: #a1241b;margin: 0;" @click="deletePosts(row.row)">删除</button>
                  </div>
                  <!-- 已驳回 -->
                  <div style="display: flex;" v-if="state.type === 2">
                     <button style="background: #1b5fa1;" @click="gopostsinfo(row.row)">查看</button>
                     <button style="background: #df890b;" @click="getApproved(row.row)">恢复</button>
                     <button style="background: #a1241b;margin: 0;" @click="deletePosts(row.row)">删除</button>
                  </div>
                  <!-- 已删除 -->
                  <div style="display: flex;" v-if="state.type === 3">
                     <button style="background: #1b5fa1;" @click="gopostsinfo(row.row)">查看</button>
                     <button style="background: #df890b;" @click="getApproved(row.row)">恢复</button>
                     <button style="background: #a1241b;margin: 0;" @click="deletePosts(row.row)">删除</button>
                  </div>
               </template>
            </el-table-column>
         </el-table>
         <!-- 分页 -->
         <div class="fenye">
            <el-pagination v-model:currentPage="state.page" v-model:page-size="state.limit" :page-sizes="[8]"
               layout="total, sizes, prev, pager, next, jumper" :total="state.total" @size-change="sizeChange"
               @current-change="currentChange" />
         </div>
      </div>
   </div>
</template>
<script lang="ts" setup >
import dayjs from "dayjs";
import { ElMessage } from "element-plus";

const props = defineProps({
   SystemData: {
      type: Object,
      default: {
         SystemInfo: {},
         SystemConfig: {},
         SystemAnnounceList: {},
         SystemUserInfo: [],
         SystemUserList: [],
         SystemClassifyList: [],
         SystemPostsList: [],
      }
   }
});

const state = ref({
   contentlist: [], // 内容列表
   page: 1,    // 页码
   limit: 8,  // 每页数量
   total: 0,   // 总数
   type: 0,    // 类型：0待审，1已审，2驳回，3已删
})

// 封装获取内容列表
const isType: any = ref(0)
const getFrontManagementContentList = async (type?: number) => {

   if (type || type === 0) {
      if (isType.value === type) {
      } else {
         state.value.type = type
         isType.value = type || state.value.type
         state.value.limit = 8
         state.value.page = 1
      }
   }

   const res: any = await cnyzsRequest('/api/cnyzs-system-posts/Front-management-content-list', {
      method: 'POST',
      data: {
         systemId: props.SystemData.SystemInfo._id, // 系统ID
         page: state.value.page,   // 页码
         limit: state.value.limit, // 每页数量
         type: type || state.value.type,   // 类型：0待审，1已审，2驳回，3已删
      }
   })
   if (res.status === 200) {
      state.value.contentlist = res.data.contentlist || []
      state.value.total = res.data.total || 0
   }
   else {
      ElMessage.error(res.message)
   }
}
getFrontManagementContentList()
// 分页
const sizeChange = (val: number) => {
   state.value.limit = val // 改变每页显示条数
   getFrontManagementContentList()
}
const currentChange = (val: number) => {
   state.value.page = val // 改变当前页
   getFrontManagementContentList()
}

// 点击帖子跳转至帖子详情页
const gopostsinfo = async (item: any) => {
   window.open('/' + item.postsId, '_blank')
}


// 审核开关
const loading1 = ref(false)
const checkSwitch = () => {
   loading1.value = true
   return new Promise((resolve, reject) => {
      setTimeout(async () => {
         loading1.value = false
         const res: any = await cnyzsRequest('/api/cnyzs-system-posts/Front-management-checkSwitch', {
            method: 'POST',
            data: {
               systemId: props.SystemData.SystemInfo._id, // 系统ID
            }
         })
         if (res.status !== 200) {
            ElMessage.warning(res.message)
            return reject(new Error('Error'))
         }
         ElMessage.success(res.message)
         return resolve(true)
      }, 1000)
   })
}

// 通过审核
const getApproved = async (row: any) => {
   const res: any = await cnyzsRequest('/api/cnyzs-system-posts/Front-management-checkRatify', {
      method: 'POST',
      data: {
         systemId: props.SystemData.SystemInfo._id, // 系统ID
         id: row._id
      }
   })
   if (res.status !== 200) return ElMessage.warning(res.message)
   ElMessage.success(res.message)
   getFrontManagementContentList()
}

// 驳回
const turnDown = async (row: any) => {
   const res: any = await cnyzsRequest('/api/cnyzs-system-posts/Front-management-checkTurnDown', {
      method: 'POST',
      data: {
         systemId: props.SystemData.SystemInfo._id, // 系统ID
         id: row._id
      }
   })
   if (res.status !== 200) return ElMessage.warning(res.message)
   ElMessage.success(res.message)
   getFrontManagementContentList()
}

// 删除
const deletePosts = async (row: any) => {
   const res: any = await cnyzsRequest('/api/cnyzs-system-posts/Front-management-checkDelete', {
      method: 'POST',
      data: {
         systemId: props.SystemData.SystemInfo._id, // 系统ID
         id: row._id
      }
   })
   if (res.status !== 200) return ElMessage.warning(res.message)
   ElMessage.success(res.message)
   getFrontManagementContentList()
}



</script>
<style lang="scss" scoped>
::-webkit-scrollbar-thumb {
   background-color: var(--aoir-color-primary-2);
   border-radius: 15px;
}

button {
   background: #419643;
   border: 0;
   box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.2);
   color: #fdfdfd;
   cursor: pointer;
   display: flex;
   align-items: center;
   font-size: 14px;
   font-weight: 600;
   height: 35px;
   justify-content: center;
   margin-right: 15px;
   padding: 0 15px;
   transition: all 0.2s;
   border-radius: 8px;

   &:hover {
      opacity: .8;
   }
}

input {
   width: 570px;
   height: 45px;
   border: 0;
   font-size: 16px;
   background-color: #FFF;
   border-bottom: 1px solid #f5f6f7;
   caret-color: var(--aoir-color-primary-2);
   padding: 0 10px;
   border-radius: var(--aoir-border-radius);
   box-shadow: 0 0 35px 0 rgb(108 108 108 / 10%);

   &::placeholder {
      color: #CCD0DB;
   }
}

.ContentAuditVue {
   width: 100%;

   .title {
      display: flex;
      align-items: center;
      margin-bottom: 20px;

      .btnActive {
         background-color: #1b5fa1;
      }
   }

   .isopen-Audit {
      margin-bottom: 15px;
      display: flex;
      align-items: center;

      div {
         font-size: 15px;
         margin-right: 20px;
      }
   }

   .fenye {
      position: absolute;
      bottom: 0;
      right: 0;
      width: calc(100% - 240px);
      height: 150px;
      // background-color: #333;
      display: flex;
      align-items: center;
      justify-content: center;
   }
}
</style>